<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="借调类型" prop="type">
                <el-select v-model="queryParams.type" placeholder="请选择借调类型" clearable size="small">
                    <el-option v-for="dict in dict.type.secondments_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="调出门店" prop="bringStoreName">
                <el-input v-model="queryParams.bringStoreName" placeholder="请输入调出门店" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="调入门店" prop="callStoreName">
                <el-input v-model="queryParams.callStoreName" placeholder="请输入调入门店" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="车牌号" prop="carNo">
                <el-input v-model="queryParams.carNo" placeholder="请输入车牌号" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收车人" prop="collectPerson">
                <el-input v-model="queryParams.collectPerson" placeholder="请输入收车人" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="借调状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择借调状态" clearable size="small">
                    <el-option v-for="dict in dict.type.secondments_state" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['car:secondment:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['car:secondment:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="secondmentList" @selection-change="handleSelectionChange">

            <el-table-column label="借调车辆" align="center" prop="carNo" />
            <el-table-column label="借调类型" align="center" prop="type">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.secondments_type" :value="scope.row.type" />
                </template>
            </el-table-column>
            <el-table-column label="调出门店" align="center" prop="bringStoreName" />

            <el-table-column label="调出时间" align="center" prop="bringTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.bringTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="调入门店" align="center" prop="callStoreName" />
            <el-table-column label="借调开始时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="借调结束时间" align="center" prop="endTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="调拨费用" align="center" prop="cost" />
            <el-table-column label="是否结算" align="center" prop="isPay">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.business_yes_no" :value="scope.row.isPay" />
                </template>
            </el-table-column>
            <el-table-column label="补充费用" align="center" prop="addedCosts" />
            <el-table-column label="借调状态" align="center" prop="status">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.secondments_state" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="220" fixed="left">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['car:secondment:edit']" v-if="scope.row.status==1">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-close" @click="handleOver(scope.row)" v-hasPermi="['car:secondment:over']" v-if="scope.row.status==1"> 结束</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['car:secondment:remove']" v-if="scope.row.status==1">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-search" @click="handleInfo(scope.row)" v-hasPermi="['car:secondment:query']">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改车辆借调对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="115px">
                <el-col :span="24">
                    <el-form-item label="借调类型">
                        <el-radio-group v-model="form.type">
                            <el-radio v-for="dict in dict.type.secondments_type" :key="dict.value" :label="parseInt(dict.value)">
                                {{dict.label}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调出门店" prop="bringStore">
                        <el-input v-model="form.bringStoreName" placeholder="请选择调出门店" clearable :style="{width: '100%'}" :readonly="true">
                            <el-button slot="append" icon="el-icon-search" @click="showBringStoreBox=true"></el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.type==1">
                    <el-form-item label="调入门店" prop="callStore">
                        <el-input v-model="form.callStoreName" placeholder="请选择调入门店" clearable :style="{width: '100%'}" :readonly="true">
                            <el-button slot="append" icon="el-icon-search" @click="showCallStoreBox=true"></el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.type==2">
                    <el-form-item label="调入门店" prop="callStoreName">
                        <el-input v-model="form.callStoreName" placeholder="请输入调入门店" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="借调车辆" prop="carNo">
                        <el-input v-model="form.carNo" placeholder="请选择借调车辆" clearable :style="{width: '100%'}" :readonly="true">
                            <el-button slot="append" icon="el-icon-search" @click="showCarBox=true"></el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调出时间" prop="bringTime">
                        <el-date-picker type="datetime" v-model="form.bringTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择调出时间" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="借调开始时间" prop="startTime">
                        <el-date-picker type="datetime" v-model="form.startTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择借调开始时间" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="借调结束时间" prop="endTime">
                        <el-date-picker type="datetime" v-model="form.endTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择借调结束时间" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.type==2">
                    <el-form-item label="借调费用" prop="cost">
                        <el-input v-model="form.cost" placeholder="请输入借调费用" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.type==2">

                    <el-form-item label="是否已结算" prop="isPay">
                        <el-radio-group v-model="form.isPay">
                            <el-radio v-for="dict in dict.type.business_yes_no" :key="dict.value" :label="parseInt(dict.value)">
                                {{dict.label}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收车人" prop="collectPerson">
                        <el-input v-model="form.collectPerson" placeholder="请输入收车人" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :maxlength="100" show-word-limit :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" :loading="btnloading">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="title" :visible.sync="openInfo" width="900px" append-to-body>
            <el-form ref="form" :model="form" size="medium" label-width="115px">
                <el-col :span="24">
                    <el-form-item label="借调类型">
                        <el-radio-group v-model="form.type">
                            <el-radio v-for="dict in dict.type.secondments_type" :key="dict.value" :label="parseInt(dict.value)" :disabled="true">
                                {{dict.label}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调出门店">{{form.bringStoreName}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调出门店">{{form.callStoreName}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="借调车辆">{{form.carNo}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调出时间">{{form.bringTime}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="借调开始时间">{{form.startTime}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="借调结束时间">{{form.endTime}}</el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.type==2">
                    <el-form-item label="借调费用">{{form.cost}}</el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.type==2">
                    <el-form-item label="是否已结算" prop="isPay">
                        <el-radio-group v-model="form.isPay">
                            <el-radio v-for="dict in dict.type.business_yes_no" :key="dict.value" :label="parseInt(dict.value)" :disabled="true">
                                {{dict.label}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收车人">{{form.collectPerson}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话">{{form.phone}}</el-form-item>
                </el-col>

                <el-col :span="12" v-if="form.status==2">
                    <el-form-item label="实际开始时间">{{form.actualStartTime}}</el-form-item>
                </el-col>

                <el-col :span="12" v-if="form.status==2">
                    <el-form-item label="实际结束时间">{{form.actualEndTime}}</el-form-item>
                </el-col>

                <el-col :span="24" v-if="form.type==2&&form.status==2">
                    <el-form-item label="补充费用">{{form.addedCosts}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :maxlength="100" show-word-limit :disabled="true" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openInfo=false">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 添加或修改车辆借调对话框 -->
        <el-dialog title="结束借调" :visible.sync="openOverForm" width="500px" append-to-body>
            <el-form ref="overForm" :model="overForm" :rules="rules" size="medium" label-width="140px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="实际借调开始时间" prop="actualStartTime">
                            <el-date-picker type="datetime" v-model="overForm.actualStartTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择实际借调开始时间" clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="实际借调结束时间" prop="actualEndTime">
                            <el-date-picker type="datetime" v-model="overForm.actualEndTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择实际借调结束时间" clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" v-if="overForm.type==2">
                        <el-form-item label="补充费用" prop="addedCosts">
                            <el-input v-model="overForm.addedCosts" placeholder="请输入借调费用" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="btnloading" @click="submitOverForm">确 定</el-button>
                <el-button @click="cancelOverForm">取 消</el-button>
            </div>
        </el-dialog>

        <select-car v-model="showCarBox" @success="selectCarInfo" repairStatus="1" statusArr="2"></select-car>
        <select-store :show="showBringStoreBox" @success="selectBringStoreInfo"></select-store>
        <select-store :show="showCallStoreBox" @success="selectCallStoreInfo"></select-store>
    </div>
</template>

<script>
import {
    listSecondment,
    getSecondment,
    delSecondment,
    addSecondment,
    overSecondment,
    updateSecondment,
    exportSecondment
} from "@/api/car/secondment";
import selectCar from "../../components/selectCar.vue";
import selectStore from "@/views/components/selectStore.vue";
export default {
    components: {
        selectCar,
        selectStore
    },
    name: "Secondment",
    dicts: ['secondments_type', 'secondments_state', 'business_yes_no'],
    data() {
        return {
            showCarBox: false,
            openInfo: false,
            showBringStoreBox: false,
            showCallStoreBox: false,
            btnloading: false,
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 车辆借调表格数据
            secondmentList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            openOverForm: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: null,
                bringStoreName: undefined,
                callStoreName: undefined,
                carNo: null,
                collectPerson: null,
                status: null,
                isPay: null,
                cost: null,
            },
            form: {
                type: 1,
                bringStore: undefined,
                callStore: undefined,
                bringStoreName: undefined,
                callStoreName: undefined,
                carId: undefined,
                carNo: undefined,
                bringTime: null,
                startTime: null,
                endTime: null,
                cost: undefined,
                isPay: 2,
                collectPerson: undefined,
                phone: undefined,
                remark: undefined,
            },
            overForm: {
                id: undefined,
                type: 1,
                actualStartTime: undefined,
                actualEndTime: undefined,
                addedCosts: undefined,
            },
            rules: {
                type: [{
                    required: true,
                    message: '借调类型不能为空',
                    trigger: 'change'
                }],
                bringStore: [{
                    required: true,
                    message: '请选择调出门店',
                    trigger: 'change'
                }],
                callStore: [{
                    required: true,
                    message: '请选择调入门店',
                    trigger: 'change'
                }],
                callStoreName: [{
                    required: true,
                    message: '请输入调入门店',
                    trigger: 'change'
                }],
                carNo: [{
                    required: true,
                    message: '请选择借调车辆',
                    trigger: 'change'
                }],
                bringTime: [{
                    required: true,
                    message: '请选择调出时间',
                    trigger: 'change'
                }],
                startTime: [{
                    required: true,
                    message: '请选择借调开始时间',
                    trigger: 'change'
                }],
                endTime: [{
                    required: true,
                    message: '请选择借调结束时间',
                    trigger: 'change'
                }],
                cost: [{
                    required: true,
                    message: '请输入借调费用',
                    trigger: 'blur'
                }, {
                  pattern: /^[0-9]+(.[0-9]{1,2})?$/,
                  message: '费用为正数，最多保留两位小数',
                  trigger: 'blur',
                }],
                isPay: [{
                    required: true,
                    message: '是否已结算不能为空',
                    trigger: 'change'
                }],
                collectPerson: [{
                    required: true,
                    message: '请输入收车人',
                    trigger: 'blur'
                }],
                phone: [
                    {
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    }, {
                        validator: (rule, value, callback) => {
                            var reg = /^1[23456789]\d{9}$/
                            if (!reg.test(value)) {
                                callback(
                                    new Error('手机号格式错误')
                                )
                            }
                            return callback()
                        },
                        trigger: 'blur',
                    },],
                actualStartTime: [{
                    required: true,
                    message: '请选择实际借调开始时间',
                    trigger: 'blur'
                }],
                actualEndTime: [{
                    required: true,
                    message: '请选择实际借调结束时间',
                    trigger: 'blur'
                }],
                addedCosts: [{
                    required: true,
                    message: '请输入借调费用',
                    trigger: 'blur'
                }, {
                  pattern: /^[0-9]+(.[0-9]{1,2})?$/,
                  message: '费用为正数，最多保留两位小数',
                  trigger: 'blur',
                }],
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询车辆借调列表 */
        getList() {
            this.loading = true;
            listSecondment(this.queryParams).then(response => {
                this.secondmentList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 取消按钮
        cancelOverForm() {
            this.openOverForm = false;
            this.resetOverForm();
        },
        resetOverForm() {
            this.overForm = {
                id: undefined,
                type: undefined,
                actualStartTime: undefined,
                actualEndTime: undefined,
                addedCosts: undefined,
            }
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                type: 1,
                bringStore: undefined,
                callStore: undefined,
                bringStoreName: undefined,
                callStoreName: undefined,
                carId: undefined,
                carNo: undefined,
                bringTime: null,
                startTime: null,
                endTime: null,
                cost: undefined,
                isPay: 2,
                collectPerson: undefined,
                phone: undefined,
                remark: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加车辆借调";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getSecondment(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改车辆借调";
            });
        },
        /** 查看按钮操作 */
        handleInfo(row) {
            this.reset();
            const id = row.id || this.ids
            getSecondment(id).then(response => {
                this.form = response.data;
                this.openInfo = true;
                this.title = "车辆借调详情";
            });
        },
        /** 结束按钮操作 */
        handleOver(row) {
            this.resetOverForm();
            this.overForm.id = row.id || this.ids;
            this.overForm.type = row.type;
            this.openOverForm = true;
        },
        selectCarInfo(car) {
            this.showCarBox = false;
            if (car) {
                this.form.carId = car.carId;
                this.form.carNo = car.carNo;
            }
        },
        selectBringStoreInfo(store) {
            this.showBringStoreBox = false;
            if (store) {
                this.form.bringStore = store.storeId;
                this.form.bringStoreName = store.storeName;
            }
        },
        selectCallStoreInfo(store) {
            this.showCallStoreBox = false;
            if (store) {
                this.form.callStore = store.storeId;
                this.form.callStoreName = store.storeName;
            }
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.btnloading = true;
                    if (this.form.id != null) {
                        updateSecondment(this.form).then(response => {
                            this.btnloading = false;
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addSecondment(this.form).then(response => {
                            this.btnloading = false;
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 提交按钮 */
        submitOverForm() {
            this.$refs["overForm"].validate(valid => {
                if (valid) {
                    this.btnloading = true;
                    overSecondment(this.overForm).then(response => {
                        this.btnloading = false;
                        this.$modal.msgSuccess("操作成功");
                        this.openOverForm = false;
                        this.getList();
                    });
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除车辆借调记录吗？').then(function () {
                return delSecondment(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$modal.confirm('是否确认导出所有车辆借调数据项？').then(() => {
                this.exportLoading = true;
                return exportSecondment(queryParams);
            }).then(response => {
                this.$download.name(response.msg);
                this.exportLoading = false;
            }).catch(() => { });
        }
    }
};
</script>
